<template>
    <el-dialog v-model="props.visible" width='30%'  @close="handleClose" destory-on-close>
        <template #header>
            <div class="header">
                <h3>申请福利</h3>
                <el-icon class="tips-icon">
                    <QuestionFilled />
                </el-icon>
                <span class="tips">申请通过的福利产品，三日内必发货，否则申请自动作废</span>
            </div>
        </template>
        <el-form :model="formData" ref="form">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="客户名称">{{ props.data?.customerName }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="级别">
                        <span class="level-one" v-if="props.data.customerLevel == 1">一级客户</span>
                        <span class="level-two" v-else-if="props.data.customerLevel == 2">二级客户</span>
                        <span class="level-three" v-else-if="props.data.customerLevel == 3">三级客户</span>
                        <span class="level-four" v-else-if="props.data.customerLevel == 4">四级客户</span>
                        <span class="level-five" v-else-if="props.data.customerLevel == 5">五级客户</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="可申请福利">
                <div class="welfare-list">
                    <div :class="`welfare ${item.id == selectedWelfare?.id? 'selected-welfare': 'no-selected'}`" v-for="item in props.welfares" :key="item.id" @click="handleSelectWelfare(item)">
                        <div :class="`welfare-image`">
                            <el-image
                                :src="item.showImage"
                            />
                        </div>
                        <div class="welfare-info-container">
                            <div class="welfare-info">
                                <span>{{ item.welfareName }}</span>
                                <span>{{ `${item.lowLevel} - ${item.hightLevel}星用户领取` }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="申请数量" prop="applyNum">
                <el-input  placeholder="请输入" v-model.number="formData.applyNum">
                    <template #append>个</template>
                </el-input>
            </el-form-item>
            <el-form-item label="申请理由" prop="applyReason">
                <el-input v-model="formData.applyReason" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="凭证上传">
                <el-upload class="avatar-uploader"
                    ref="uploadRef"
                    :limit="1"
                    :action="uploadImgUrl"
                    :headers="headers"
                    :before-upload="beforeAvatarUpload" 
                    :on-success="handleAvatarSuccess"
                >
                    <img v-if="formData.proof" :src="formData.fileUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" :disabled="shouldSubmit" @click="handleSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance,UploadInstance, UploadProps } from 'element-plus';
import { globalHeaders } from "@/utils/request";
import { addWelfareApply } from '@/api/sj/welfareExamine-crm/index';

const form = ref<FormInstance>();
const uploadRef = ref<UploadInstance>();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl + "/resource/oss/upload");
const headers = ref(globalHeaders);
const props = defineProps(['visible','data','welfares']);
const fileType = ['image/jpeg','image/png'];
const shouldSubmit = ref(true);
console.log(props.data);
const emit = defineEmits(['submit','close']);
const levelOption = [
    {label:'一星',value:'1'},
    {label:'二星',value:'2'},
    {label:'三星',value:'3'},
    {label:'四星',value:'4'},
    {label:'五星',value:'5'},
];
const selectedWelfare = ref<any>();

const formData = ref<any>({
    applyNum: undefined,
    applyReason: undefined,
    fileUrl: undefined,
    type: 2
});

/** 自动选择第一个福利产品 */
watch(()=>props.welfares,(newData)=>{
    selectedWelfare.value = newData[0];
},{deep:true});

const handleSelectWelfare = (welfare: any) => {
    selectedWelfare.value = welfare;
};

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if ( !fileType.includes(rawFile.type)) {
        ElMessage.error('图片必须为jpg或png格式!')
        return false;
    } else if (rawFile.size / 1024 / 1024 > 15) {
        ElMessage.error('图片大小不可超过 15MB!')
        return false;
    }
    return true;
};

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response
    ) => {
        formData.value.fileUrl = response.data.url;
        shouldSubmit.value = false;
};

const handleSubmit = async () => {
    const submitData = {
        customerId: props.data.id,
        customerName: props.data.customerName,
        level: props.data.customerLevel,
        welfareId: selectedWelfare.value.id,
        welfareName: selectedWelfare.value.welfareName,
        ...formData.value
    }
    const { code } = await addWelfareApply(submitData);
    if(code == 200){
        emit('submit',true);
        handleClose();
    }else{
        emit('submit',false);
    }
};

const handleClose = ()=>{
    form.value?.resetFields();
    uploadRef.value?.clearFiles();
    shouldSubmit.value = false;
    emit('close');
};



</script>

<style scoped lang="scss">
.header{
    display: flex;
    align-items: center;
    .el-icon{
        margin-left:10px;
    };
    .tips-icon:hover + .tips{
        visibility: visible;
    }
    .tips{
        font-size: 15px;
        margin-left: 25px;
        visibility: hidden;
    }
}
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.avatar-uploader .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
.completed{
    color: yellowgreen
}
.uncompleted{
    color: orange
}
.level-one,.level-two {
    color:yellowgreen
}
.level-three,.level-four{
    color: orange;
}
.level-five{
    color: red
}
.welfare-list{
    .selected-welfare{
        border: solid 1px green;
        z-index: 999;
    }
    .no-selected{
        border: solid 1px #fff;
    }
    .welfare{
        height: 120px;
        display: flex;
        .welfare-image{
            height: 100%;
            width: 180px;
            .el-image{
                height: 100%;
            }
        }
        
        .welfare-info-container{
            display: flex;
            align-items: center;
            margin-left: 15px;
        }
        .welfare-info{
            span{
                display: block;
                font-size: 18px;
            }
        }
    }
}
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>